<template>
  <div class="channelContainer">
    <van-nav-bar title="频道管理" safe-area-inset-top fixed >
      <template #right>
        <van-icon name="cross" size="0.373rem" color="#fff" @click="$emit('close')"/>
      </template>
    </van-nav-bar>
    <!-- 我的频道 -->
    <div class="my-channel-box">
      <div class="channel-title">
        <span>我的频道
          <span class="small-title">
            {{ isEdit ? '点击删除频道' : '点击进入频道' }}
          </span>
        </span>
        <span @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑'}}</span>
      </div>
      <!-- 我的频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="obj in userChannelList" :key="obj.id" @click="removeFn(obj)">
          <div class="channel-item van-hairline--surround">
            {{obj.name}}
            <!-- 删除的徽标 -->
            <van-badge color="transparent" class="cross-badge" v-if="isEdit && obj.name !== '推荐'">
              <template #content>
                <van-icon name="cross" class="badge-icon" color="#cfcfcf" size="0.32rem"/>
              </template>
            </van-badge>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 更多频道 -->
    <div class="more-channel-box">
      <div class="channel-title">
        <span class="title">点击添加更多频道：</span>
      </div>
      <!-- 更多频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="obj in unChannelList" :key="obj.id" @click="addFn(obj)">
          <div class="channel-item van-hairline--surround">
            {{obj.name}}
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { allChannelsAPI } from '@/api'
export default {
  props: {
    userChannelList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      allChannelList: [],
      isEdit: false
    }
  },
  async created () {
    const res = await allChannelsAPI()
    this.allChannelList = res.data.data.channels
  },
  computed: {
    unChannelList () {
      const result = this.allChannelList.filter((obj) => {
        const index = this.userChannelList.findIndex((obj2) => obj2.id === obj.id)
        if (index !== -1) {
          return false
        } else {
          return true
        }
      })
      return result
    }
  },
  methods: {
    // 新增频道
    addFn (obj) {
      if (this.isEdit) {
        this.$emit('addChannel', obj)
      }
    },
    // 删除频道
    removeFn (obj) {
      if (this.isEdit && obj.name !== '推荐') {
        this.$emit('removeChannel', obj) // 删除频道
      } else {
        this.$emit('changeChannel', obj)
        this.$emit('close') // 关闭弹窗
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .van-popup,
  .popup-container {
    background-color: transparent;
    height: 100%;
    width: 100%;
  }
  .popup-container {
    display: flex;
    flex-direction: column;
  }
  .pop-header {
    height: 90px;
    background-color: pink;
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    .title {
      width: 100%;
      position: absolute;
      bottom: 15px;
    }
  }
  .pop-body {
    flex: 1;
    overflow: scroll;
    padding: 8px;
    background-color: #fff;
  }
  .my-channel-box,
  .more-channel-box {
    margin-top: 46px;
    .channel-title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 28px;
      padding: 0 6px;
    }
  }
  .channel-item {
    font-size: 12px;
    text-align: center;
    line-height: 36px;
    background-color: #fafafa;
    margin: 5px;
  }
  // 删除的徽标
  .cross-badge {
    position: absolute;
    top: 0;
    right: -3px;
    border: none;
  }
  // 提示文字
  .small-title {
    font-size: 10px;
    color: gray;
  }
  .van-nav-bar {
    background-color: pink;
  }
</style>
